<template>
  <div class="ContentRightBottom">
    <dv-border-box-12>
      <div class="title">车队信息</div>
      <div class="fleetText">
        <div class="topText">
          <ul>
            <li>
              <span>全部车辆</span>
              <div>{{ rightBottom.topText.allNum }}</div>
            </li>
            <li>
              <span>在线车辆</span>
              <div>{{ rightBottom.topText.onlineNum }}</div>
            </li>
            <li>
              <span>离线车辆</span>
              <div>{{ rightBottom.topText.notOnlineNum }}</div>
            </li>
            <li>
              <span>视频故障</span>
              <div>{{ rightBottom.topText.faultNum }}</div>
            </li>
          </ul>
        </div>
        <div class="dayText">
          <div class="text">
            <span>日行驶总里程</span>
            <div>{{ rightBottom.dayText.totalMileageDay }} km</div>
          </div>
          <div class="text">
            <span>日行驶总时长</span>
            <div>{{ rightBottom.dayText.totalTimeDay }} ms</div>
          </div>
          <div class="text">
            <span>日平均行驶总里程</span>
            <div>
              <span>{{ rightBottom.dayText.avgMileageDay }}m</span>
              <span class="yesterday">4.9%(较昨日)</span>
            </div>
          </div>
          <div class="text">
            <span>日平均行驶时长</span>
            <div>
              <span>{{ rightBottom.dayText.avgTimeDay }} h</span>
              <span class="yesterday">4.9%(较昨日)</span>
            </div>
          </div>
        </div>
      </div>
      <dv-scroll-board
        :config="config_fleet"
        style="
          width: 400px;
          height: 220px;
          margin: auto;
          padding-top: 15px;
          padding-bottom: 15px;
        "
      />
    </dv-border-box-12>
  </div>
</template>

<script>
export default {
  name: "ContentRightBottom",
  props: ["rightBottom"],
  data() {
    return {
      config_fleet: {
        data: [],
        index: true,
        indexHeader: "",
        columnWidth: [40],
        rowNum: 5,
        align: ["center"],
        headerBGC: "#06376F",
        evenRowBGC: "#061d46",
        oddRowBGC: "#09285A",
      },
    };
  },
  watch: {
    rightBottom: {
      deep: true,
      immediate: true,
      handler(n) {
        this.getConfigFleet(n.carList);
      },
    },
  },
  methods: {
    getConfigFleet(data) {
      data.forEach((e) => {
        this.config_fleet.data.push([
          e.plate,
          e.dayMileage,
          e.vehicleDrivingStatus,
        ]);
      });
      this.config_fleet = { ...this.config_fleet };
    },
  },
};
</script>

<style scoped>
.ContentRightBottom {
  width: 100%;
  height: 55%;
}
.ContentRightBottom .title {
  text-align: center;
  color: rgb(36, 161, 206);
  font-size: 20px;
  padding-top: 5px;
}
.fleetText {
  width: 90%;
  /* height: 500px; */
  margin: auto;
  background-image: url("../assets/imgs/carbg.png");
  background-size: cover;
}
.fleetText .topText ul {
  display: flex;
}
.topText ul li {
  padding: 0 15px;
}
.topText ul li span {
  color: #ccc;
  font-size: 15px;
}
.topText ul li div {
  color: rgb(36, 161, 206);
  text-align: center;
  font-size: 25px;
  font-weight: 700;
}
.dayText {
  display: flex;
  flex-wrap: wrap;
}
.dayText .text {
  width: 200px;
  height: 50px;
  margin-left: 10px;
  padding-top: 15px;
}
.dayText .text > span {
  color: #ccc;
  font-size: 15px;
}
.dayText .text > div {
  color: rgb(36, 161, 206);
  font-size: 19px;
  /* font-weight: 700; */
}
.dayText .text div .yesterday {
  margin-left: 10px;
  font-size: 10px;
}
</style>   